/**
 * 数据路由
 *
 *    主要特点如下:
 *
 *      以往获取数据的方式：
 *
 *      /     ->      /about        ->      About组件渲染完成在 useEffect 中获取数据    -> 重新渲染 About
 *
 *      现在：
 *
 *      /     ->      获取数据，携带数据到    ->      /about   直接渲染 About
 *
 *
 * 1. 要用数据路由的话，路由器的选择上，就不能是 HashRouter、BorwserRouter
 *    而是使用 RouterProvider 组件，传递 router 属性
 *    router 属性的值：
 *      createBorwserRouter()
 *      createHashRouter()
 */

import ReactDOM from "react-dom/client";
import { RouterProvider, createHashRouter } from "react-router-dom";

import "./global.css";

import About, { loader } from "./pages/About.tsx";
import Home from "./pages/Home.tsx";
import Error from "./pages/Error.tsx";

// 创建路由器
const router = createHashRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    loader: loader,
    element: <About />,
    errorElement: <Error />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />
);
